<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row>
        <el-col :span="12" v-if="parentData.isCompany">
          <el-form-item label="姓名" >
            <el-input v-model="form.userName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="!parentData.isCompany">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="密码" prop="passwd">
            <el-input v-model="form.passwd" type="password" autocomplete="new-password" placeholder="请输入密码，默认abcd1234" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="identificationNumber">
            <el-input v-model="form.identificationNumber" placeholder="请输入身份证号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="parentData.isCompany">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信用代码" prop="businessLicenseImgNumber">
            <el-input v-model="form.businessLicenseImgNumber" placeholder="请输入统一社会信用代码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="简称码" prop="prefix">
            <el-input v-model="form.prefix" placeholder="请输入2-4位纯字母的入驻商简称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="税点(%)" prop="taxPoint">
            <el-input v-model="form.taxPoint" placeholder="请输入税点" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在区域" prop="areaList">
            <el-cascader
              v-model="form.areaList"
              :options="parentData.areaOptions"
              :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" prop="address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="入驻商编码" prop="serialNumber">
            <el-input v-model="form.serialNumber" prop="serialNumber"  :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传证件">
            <div class="custom-grid">
              <el-form-item prop="identificationImg">
                <el-upload
                  v-model="form.identificationImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file) => handleImgSuccess('identification', res, file)"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.identificationImg" :src="form.identificationImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证正面照</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="identificationBackImg">
                <el-upload
                  v-model="form.identificationBackImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file) => handleImgSuccess('identificationBack', res, file)"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.identificationBackImg"
                    :src="form.identificationBackImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证背面照</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="identificationInhandImg">
                <el-upload
                  v-model="form.identificationInhandImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file) => handleImgSuccess('identificationInhand', res, file)"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.identificationInhandImg"
                    :src="form.identificationInhandImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">手持身份证合照</div>
            </div>
            <div v-if="parentData.isCompany" class="custom-grid">
              <el-form-item prop="businessLicenseImg">
                <el-upload
                  v-model="form.businessLicenseImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file) => handleImgSuccess('businessLicense', res, file)"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.businessLicenseImg" :src="form.businessLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">社会信用三合一照片</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="line-height: 36px;">
        <el-col :span="14" :offset="1">
          <div style="padding-bottom: 22px;">
            <el-checkbox v-if="!parentData.hideCheckbox"
              v-model="form.isMonthlyClient"
              label="是否为月结客户"
              :checked="!!form.isMonthlyClient"
              :false-label="0"
              :true-label="1"
              :disabled="!!form.isEnsure"
              @change="(value) => form.isEnsure = 0"
            />
            <el-checkbox v-if="!parentData.hideCheckbox"
              v-model="form.isIndependentCheckout"
              label="是否独立核算"
              :checked="!!form.isIndependentCheckout"
              :false-label="0"
              :true-label="1"
            />
            <el-checkbox v-if="!parentData.hideCheckbox"
              v-model="form.isLoadConfirm"
              label="是否装货确认"
              :checked="!!form.isLoadConfirm"
              :false-label="0"
              :true-label="1"
            />
            <el-checkbox v-if="!parentData.hideCheckbox"
              v-model="form.isUnloadConfirm"
              label="是否卸货确认"
              :checked="!!form.isUnloadConfirm"
              :false-label="0"
              :true-label="1"
            />
            <el-checkbox
              v-model="form.isReleaseCheck"
              label="货源是否需要平台审核"
              :checked="!!form.isReleaseCheck"
              :false-label="0"
              :true-label="1"
            />
            <el-checkbox v-if="!parentData.hideCheckbox"
              v-model="form.isEnsure"
              label="是否需要发货保证金"
              :checked="!!form.isEnsure"
              :false-label="0"
              :true-label="1"
              :disabled="!!form.isMonthlyClient"
              @change="(value) => form.isMonthlyClient = 0"
            />
          </div>
        </el-col>
        <el-col v-if="form.isEnsure" :span="4">
          <el-form-item prop="ensureFee">
            <el-input v-model="form.ensureFee" placeholder="请输入保证金" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" plain @click="funcSubmit('form')">提交</el-button>
  </div>
</template>
<script>
import {
  getShipperInfo,
  getShipmentInfo,
  updateShipperInfo
} from "@/api/shipment";
import { validatePhone, validateIDNumber, validateBusinessLicenseImgNum, validatePrefix } from "@/utils/validate.js";
import { mayDecimal,istenOrEighteen,isBetweenHundred} from "@/utils/validate4Form.js";

export default {
  name: "ShipmentEdit",
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          hideCheckbox: false,
          isCompany: false,
          areaOptions: [],
          goodsTypeList: [],
          typeOptions: [],
          vehicleDictList: [],
          bankOptions: []
        };
      }
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      // uploadUrl: process.env.VUE_APP_BASE_API + "ntocc-tps-api/fileUpload",
      uploadUrl: this.uploadUrl,
      form: {},
      rules: {
        userName: [{ required: true, message: "请输入托运人姓名", trigger: "blur" },
        { max:64, message: "长度不能超过64个字符", trigger: "blur" }],
        legalName: [{ required: false, message: "请输入法人代表名称", trigger: "blur" },
        { max:64, message: "长度不能超过64个字符", trigger: "blur" }],
        phone: [
          {
            required: true,
            validator(rule, value, callback) {
              validatePhone(value)
                ? callback()
                : callback(new Error("手机号格式有误"));
            },
            trigger: "blur",
          },
        ],
        upass: [
          { required: false, message: "请输入密码", trigger: "blur" },
          { min: 8,message: "数字与字母组合，至少8 个字符", trigger: "blur" }
          ],
        identificationNumber: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
          {
            validator(rule, value, callback) {
              validateIDNumber(value)? callback() : callback(new Error("请输入正确的身份证号"));
            },
            trigger: "blur"
          }
        ],
        companyName: [
          { required: true, message: "请输入托运单位", trigger: "blur" },
          { max: 100, message: "长度不能超过100个字符", trigger: "blur" }
        ],

         businessLicenseImgNumber: [
          {
            required: false,
            message: "请输入统一社会信用代码",
            trigger: "blur"
          },
          { validator: istenOrEighteen, trigger: "blur" },
        ],
        prefix: [
          { required: false, message: "请输入入驻商简称", trigger: "blur" },
          {
            validator(rule, value, callback) {
              validatePrefix(value)
                ? callback()
                : callback(new Error("请输入2-4位纯字母的入驻商简称"));
            },
            trigger: "blur",
          },
        ],
        taxPoint: [
          { required: false, message: "请输入税点", trigger: "blur" },
          { validator:isBetweenHundred, trigger: 'blur' }
        ],
        address: [
          { required: false, message: "请输入详细地址", trigger: "blur" },
          { min: 1, max:256, message: "长度在 1 到 256个字符", trigger: "blur" }
        ],
        areaList: [
          { required: false, message: "请选择通信地址", trigger: "blur" },
        ],
        ensureFee: [
          { required: false, message: "请输入保证金", trigger: "blur" },
          { validator:mayDecimal, trigger: 'blur' }
        ],
        myTaxOrgan: [
          {
            required: false,
            message: "请输入所属主管税务机关",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    var code = this.$route.query.code ? this.$route.query.code : "";
    if (code) {
      getShipperInfo(code).then(response => {
        this.form = response.data;
      });
    } else {
      getShipmentInfo().then(response => {
        this.form = response.data;
      });
    }
  },
  methods: {
    handleImgSuccess(type, res, file) {
      this.form[`${type}Img`] = res.data;
      this.$message({ message: res.msg, type: "success" });
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/bmp" ||
        file.type === "image/png";
      const isLtnM = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,BMP,PNG 格式!");
      }
      if (!isLtnM) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLtnM;
    },
    funcSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          this.form.staffType = this.parentData.isCompany ? 1 : 0;
          updateShipperInfo(this.form).then(response => {
            rLoading.close();
            this.$message({ message: response.msg, type: 'success' })
            this.$router.go(-1)
          })
        // } else {
        //   this.$message.error("必选项不能为空!");
        }
      });
    }
  }
};
</script>
<style scoped>
.custom-grid {
  display: inline-block;
  font-size: 14px;
  color: #8c939d;
  margin-right: 20px;
}
.avatar-uploader /deep/.el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  box-sizing: border-box;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #c0ccda;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-cascader {
  width: 100%;
}
</style>
